<!-- 过程检验单的添加修改组件里的检测方案选择组件 -->
<template>
  <el-dialog
    title="选择质检方案"
    :visible.sync="localVisible"
    width="800px"
    append-to-body
    @close="handleClose">
    <div class="inspect-plan-selector">
      <!-- 搜索区域 -->
      <el-form :inline="true" :model="queryParams" class="search-form">
        <el-form-item label="方案编号">
          <el-input v-model="queryParams.template_code" placeholder="请输入方案编号" clearable></el-input>
        </el-form-item>
        <el-form-item label="方案名称">
          <el-input v-model="queryParams.template_name" placeholder="请输入方案名称" clearable></el-input>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="handleQuery">搜索</el-button>
          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 表格区域 -->
      <el-table
        v-loading="loading"
        :data="planList"
        border
        highlight-current-row
        @row-click="handleRowClick"
        ref="planTable"
        :row-class-name="rowClassName">
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <el-table-column prop="template_code" label="方案编号" min-width="120"></el-table-column>
        <el-table-column prop="template_name" label="方案名称" min-width="150"></el-table-column>
        <el-table-column prop="qc_types" label="检测种类" min-width="120">
          <template slot-scope="scope">
            {{ formatQcTypes(scope.row.qc_types) }}
          </template>
        </el-table-column>
        <el-table-column prop="enable_flag" label="是否启用" width="80">
          <template slot-scope="scope">
            <el-tag :type="scope.row.enable_flag === 'Y' ? 'success' : 'info'">
              {{ scope.row.enable_flag === 'Y' ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否可用" width="80">
          <template slot-scope="scope">
            <el-tag :type="isAllowedType(scope.row.qc_types) ? 'success' : 'danger'">
              {{ isAllowedType(scope.row.qc_types) ? '可用' : '不可用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" min-width="150">
          <template slot-scope="scope">
            {{ scope.row.remark || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="80" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click.stop="handleSelect(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="confirmSelection" :disabled="!selectedPlan">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import request from '@/utils/request'; // 导入axios实例

export default {
  name: "InspectPlanSelector",
  props: {
    // 对话框显示状态
    visible: {
      type: Boolean,
      default: false
    },
    // 允许的方案类型，如果不传则使用默认值
    allowedTypes: {
      type: Array,
      default: null
    },
    // 质检方案类型
    qcTypes: {
      type: [Number, String],
      default: undefined
    }
  },
  data() {
    return {
      // 本地控制对话框显示状态
      localVisible: false,
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      // 质检方案列表
      planList: [],
      // 选中的质检方案
      selectedPlan: null,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        template_code: undefined,
        template_name: undefined,
        qc_types: undefined, // 默认查询过程检验类型(2)
        enable_flag: 'Y' // 默认查询启用状态
      },
      // 业务类型映射
      qcTypeMap: {
        '1': '自制工序检验',
        '2': '首检',
        '3': '巡检',
        '4': '来料检验',
        '5': '成品检验',
        '6': '生产退料检验',
        '7': '销售退货检验',
        '8': '出货检验'
      }
    };
  },
  watch: {
    // 监听visible prop变化，更新本地状态
    visible(val) {
      this.localVisible = val;
      if (val) {
        this.getList();
      }
    }
  },
  computed: {
    // 获取允许的方案类型
    defaultAllowedTypes() {
      return ['1', '2', '3', '5']; // 自制工序检验、首检、巡检、成品检验
    },
    // 实际使用的允许类型，优先使用props传入的值
    effectiveAllowedTypes() {
      return this.allowedTypes || this.defaultAllowedTypes;
    }
  },
  created() {
    // 初始化时同步本地状态
    this.localVisible = this.visible;
    this.getList();
  },
  methods: {
    // 获取质检方案列表
    getList() {
      this.loading = true;
      
      // 构建查询参数，区分业务参数和分页参数
      const params = {
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize
      };
      
      // 构建业务查询条件
      const data = {
        template_code: this.queryParams.template_code,
        template_name: this.queryParams.template_name,
        qc_types: this.qcTypes, // 使用从props传入的qcTypes
        enable_flag: 'Y'  // 默认查询启用状态
      };
      
      console.log('分页参数:', params);
      console.log('查询条件:', data);
      
      // 调用API
      request({
        url: '/ldzl-qc/qc/qcTemplate/selectQcTemplateList',
        method: 'post',
        params: params, // 分页参数通过params传递（会转为URL参数）
        data: data,     // 业务参数通过data传递（会转为请求体）
        headers: {
          repeatSubmit: false // 禁用防重复提交
        }
      }).then(response => {
        console.log('API响应数据:', response);
        
        if (response.code === 200) {
          // 检查rows是否存在以及格式是否正确
          console.log('rows数据:', response.rows);
          console.log('数据类型:', typeof response.rows);
          console.log('数据长度:', response.rows ? response.rows.length : 0);
          
          this.planList = response.rows || [];
          this.total = response.total || 0;
          
          // 处理数据，确保qc_types字段为字符串类型
          if (this.planList.length > 0) {
            this.planList = this.planList.map(item => {
              return {
                ...item,
                qc_types: item.qc_types !== undefined ? String(item.qc_types).trim() : ''
              };
            });
          }
          
          // 调试日志：检查返回的数据格式
          if (this.planList.length > 0) {
            console.log('第一条数据示例:', this.planList[0]);
            console.log('qc_types字段:', this.planList[0].qc_types, '类型:', typeof this.planList[0].qc_types);
          }
          
          if (this.planList.length === 0) {
            this.$message.warning('未找到匹配的质检方案数据');
          }
        } else {
          this.planList = [];
          this.total = 0;
          this.$message.error(response.msg || '获取质检方案列表失败');
        }
        this.loading = false;
      }).catch(error => {
        console.error('获取质检方案列表失败:', error);
        this.planList = [];
        this.total = 0;
        this.loading = false;
        this.$message.error('获取质检方案列表失败: ' + (error.message || error));
      });
    },

    // 格式化检测类型显示
    formatQcTypes(qcType) {
      if (!qcType) return '-';
      // qc_types可能是数字或字符串，确保转换为字符串进行比较
      const qcTypeStr = String(qcType).trim();
      return this.qcTypeMap[qcTypeStr] || qcTypeStr;
    },

    // 搜索按钮操作
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    // 重置按钮操作
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        template_code: undefined,
        template_name: undefined
      };
      this.handleQuery();
    },

    // 行点击事件
    handleRowClick(row) {
      // 检查选择的方案类型是否符合要求
      const qcType = String(row.qc_types || '').trim();
      
      console.log('选择的方案类型:', qcType, '类型:', typeof qcType);
      console.log('允许的类型:', this.effectiveAllowedTypes);
      console.log('是否包含:', this.effectiveAllowedTypes.includes(qcType));
      
      // 检查是否在允许的类型中
      const isAllowed = this.effectiveAllowedTypes.includes(qcType);
      
      if (!isAllowed) {
        this.$message.warning(`选择的方案与当前的检测单不匹配，请重新选择`);
        return;
      }
      
      this.selectedPlan = row;
      this.$refs.planTable.setCurrentRow(row);
    },

    // 选择按钮点击事件
    handleSelect(row) {
      // 检查选择的方案类型是否符合要求
      const qcType = String(row.qc_types || '').trim();
      
      console.log('选择按钮 - 方案类型:', qcType, '类型:', typeof qcType);
      
      // 检查是否在允许的类型中
      const isAllowed = this.effectiveAllowedTypes.includes(qcType);
      
      if (!isAllowed) {
        this.$message.warning(`选择的方案与当前的检测单不匹配，请重新选择`);
        return;
      }
      
      this.selectedPlan = row;
      this.$refs.planTable.setCurrentRow(row);
      this.confirmSelection();
    },

    // 确认选择
    confirmSelection() {
      if (this.selectedPlan) {
        // 检查选择的方案类型是否符合要求
        const qcType = String(this.selectedPlan.qc_types || '').trim();
        
        console.log('确认选择 - 方案类型:', qcType, '类型:', typeof qcType);
        
        // 检查是否在允许的类型中
        const isAllowed = this.effectiveAllowedTypes.includes(qcType);
        
        if (!isAllowed) {
          this.$message.warning(`选择的方案与当前的检测单不匹配，请重新选择`);
          return;
        }
        
        // 构造返回的方案对象，确保包含需要的所有字段
        const plan = {
          planId: this.selectedPlan.template_id,
          planCode: this.selectedPlan.template_code,
          planName: this.selectedPlan.template_name,
          // 添加原始数据，以便父组件可以访问完整信息
          originalData: this.selectedPlan
        };
        this.$emit('select', plan);
        this.handleClose();
      } else {
        this.$message.warning('请先选择一个质检方案');
      }
    },

    // 关闭对话框
    handleClose() {
      this.selectedPlan = null;
      if (this.$refs.planTable) {
        this.$refs.planTable.setCurrentRow(null);
      }
      this.localVisible = false;
      this.$emit('update:visible', false);
      this.$emit('close');
    },

    // 行样式类名
    rowClassName({ row }) {
      const qcType = String(row.qc_types || '').trim();
      return this.effectiveAllowedTypes.includes(qcType) ? 'allowed-row' : '';
    },

    // 判断方案类型是否符合当前检测单的要求
    isAllowedType(qcType) {
      const qcTypeStr = String(qcType).trim();
      return this.effectiveAllowedTypes.includes(qcTypeStr);
    }
  }
};
</script>

<style scoped>
.inspect-plan-selector {
  padding: 10px 0;
}

.search-form {
  margin-bottom: 15px;
}

/* 表格行悬停和选中样式 */
::v-deep .el-table__body tr:hover > td {
  background-color: #ecf5ff !important;
}

::v-deep .el-table__body tr.current-row > td {
  background-color: #ecf5ff !important;
}

/* 允许的方案行样式 */
::v-deep .el-table__row.allowed-row {
  background-color: #f0f9eb;
}

/* 不允许的方案行样式 */
::v-deep .el-table__row:not(.allowed-row) {
  color: #999;
  background-color: #f9f9f9;
}
</style> 